<template>
  <div>
    <div class="makeTab">
      <div
        :class="index == makeListNum ? 'actvie' : ''"
        v-for="(item, index) in makeTab"
        :key="index"
        @click="clickTab(index)"
      >
        {{ item }}
      </div>
    </div>
    <swipe
      class="makeList"
      @change="makeListChange"
      :loop="false"
      :show-indicators="false"
      ref="swipe"
    >
      <swipe-item>
        <div class="nav">
          <span v-for="item in nav1" :key="item">{{ item }}</span>
        </div>
        <div class="sortBox" v-if="sort">
          <div
            class="list"
            v-for="(item, index) in newsymbolsArray"
            :key="index"
          >
            <template v-if="ch">
              <div
                @click="
                  to('/market', {
                    symbol: {
                      symbol: item.split('.')[1],
                      title: item.split('.')[1].toUpperCase()
                    }
                  })
                "
              >
                <div :class="item.img ? '' : 'noAmount'">
                  <div>
                    {{
                      item
                        .split('.')[1]
                        .slice(0, -4)
                        .toUpperCase()
                    }}
                    <span>/USDT</span>
                  </div>
                </div>
                <div>{{ ch[item].tick.close }}</div>
                <div :class="ch[item].change > 0 ? 'bg-green' : ''">
                  {{ ch[item].change > 0 ? '+' : '' }}{{ ch[item].change }}%
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="listBox" v-if="!sort">
          <div class="list" v-for="(item, index) in symbolsArray" :key="index">
            <template v-if="ch">
              <div
                @click="
                  to('/market', {
                    symbol: item
                  })
                "
              >
                <div :class="item.img ? '' : 'noAmount'">
                  <img :src="item.img" v-if="item.img" />
                  <div class="nowidth">
                    {{ item.title }}
                    <p>
                      量：{{
                        (
                          ch[`market.${item.symbol}.detail`].tick.amount / 10000
                        ).toFixed(2)
                      }}万
                    </p>
                  </div>
                </div>
                <div>{{ ch[`market.${item.symbol}.detail`].tick.close }}</div>
                <div
                  :class="
                    ch[`market.${item.symbol}.detail`].change > 0
                      ? 'bg-green'
                      : ''
                  "
                >
                  {{ ch[`market.${item.symbol}.detail`].change > 0 ? '+' : ''
                  }}{{ ch[`market.${item.symbol}.detail`].change }}%
                </div>
              </div>
            </template>
          </div>
        </div>
      </swipe-item>
      <swipe-item>
        <div class="nav">
          <span v-for="item in nav2" :key="item">{{ item }}</span>
        </div>
        <div class="sortBox" v-if="sort">
          <div
            class="list"
            v-for="(item, index) in newsymbolsArray"
            :key="index"
          >
            <template v-if="ch">
              <div
                @click="
                  to('/market', {
                    symbol: {
                      symbol: item.split('.')[1],
                      title: item.split('.')[1].toUpperCase()
                    }
                  })
                "
              >
                <div :class="item.img ? '' : 'noAmount'">
                  <img :src="item.img" v-if="item.img" />
                  <div>
                    {{
                      item
                        .split('.')[1]
                        .slice(0, -4)
                        .toUpperCase()
                    }}
                    <span>/USDT</span>
                  </div>
                </div>
                <div>{{ ch[item].tick.close }}</div>
                <div
                  v-if="nav2[2] != '24H成交量'"
                  :class="ch[item].change > 0 ? 'bg-green' : ''"
                >
                  {{ ch[item].change > 0 ? '+' : '' }}{{ ch[item].change }}%
                </div>
                <div v-if="nav2[2] == '24H成交量'" class="bg-blue">
                  {{ (ch[item].tick.amount / 10000).toFixed(2) }}万
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="listBox" v-if="!sort">
          <div class="list" v-for="(item, index) in symbolsArray" :key="index">
            <template v-if="ch">
              <div
                @click="
                  to('/market', {
                    symbol: item
                  })
                "
              >
                <div :class="item.img ? '' : 'noAmount'">
                  <img :src="item.img" v-if="item.img" />
                  <div class="nowidth">
                    {{ item.title }}
                    <p>
                      量：{{
                        (
                          ch[`market.${item.symbol}.detail`].tick.amount / 10000
                        ).toFixed(2)
                      }}万
                    </p>
                  </div>
                </div>
                <div>{{ ch[`market.${item.symbol}.detail`].tick.close }}</div>
                <div
                  :class="
                    ch[`market.${item.symbol}.detail`].change > 0
                      ? 'bg-green'
                      : ''
                  "
                >
                  {{ ch[`market.${item.symbol}.detail`].change > 0 ? '+' : ''
                  }}{{ ch[`market.${item.symbol}.detail`].change }}%
                </div>
              </div>
            </template>
          </div>
        </div>
      </swipe-item>
    </swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'

import { EventBus } from '@/utils/event-bus'
export default {
  props: {
    makeTab: [], //Tab标题
    nav1: [], //第一页nav
    nav2: [], //第二页nav
    symbolsArray: [] //币种数组
  },
  components: {
    Swipe,
    SwipeItem
  },
  data() {
    return {
      sort: true, //是否排序
      ch: {}, //实时数据
      newsymbolsArray: [], //排序后的币种数组
      makeListNum: 0 // 涨幅榜、成交量Tab
    }
  },
  created() {

     this.symbolsArray.forEach(item => {
        let d = this.$store.state.websocket.ch[`market.${item.symbol}.detail`]
        if(!d) return
        d.change = parseFloat(
          ((d.tick.close - d.tick.open) / d.tick.open) * 100
        ).toFixed(2)
		  	this.$set(this.ch, `market.${item.symbol}.detail`,d);
		  });


    // 定时查询
		let Interval = setInterval(() => {
			if (this.$store.state.websocket.is_open_socket) {
				this.symbolsArray.forEach(item => {
        let ch = `market.${item.symbol}.detail`
        // 消息回调
        EventBus.$on(ch, res => {
          if (!res.data) return
          let d = res.data
          d.change = parseFloat(
            ((d.tick.close - d.tick.open) / d.tick.open) * 100
          ).toFixed(2)
          this.$set(this.ch, res.data.ch, d)
          if (this.$route.path == '/quotation') {
            this.sort = false
            return
          }
          if (this.nav2[2] == '24H成交量' && this.makeListNum == 1) {
            // console.log('24H成交量排序')
            return this.amountSort(this.ch)
          }
          // console.log(' 涨幅排序')
          this.changeSort(this.ch)
        })
      })
				// 已连接移除定时器
				clearInterval(Interval);
			}
		}, 500);
  },
  methods: {
    //  涨幅榜、成交量 滑动切换事件
    makeListChange(index) {
      this.makeListNum = index
      console.log('当前 Swipe 索引：', index)
    },
    //  点击Tab
    clickTab(index) {
      this.makeListNum = index
      this.$refs.swipe.swipeTo(index)
    },
    //  涨幅排序
    changeSort(arrData) {
      let keysSorted = Object.keys(arrData).sort(function(a, b) {
        return arrData[b].change - arrData[a].change
      }) //排序健名
      this.newsymbolsArray = keysSorted
    },
    // 24H成交量排序
    amountSort(arrData) {
      let keysSorted = Object.keys(arrData).sort(function(a, b) {
        return arrData[b].tick.amount - arrData[a].tick.amount
      }) //排序健名
      this.newsymbolsArray = keysSorted
    },
    //跳转页面
    to(to, query) {
      this.$router.push({ path: to, query: query })
    }
  }
}
</script>

<style lang="less" scoped>
.makeTab {
  display: flex;
  border-bottom: solid 1px #e6eaed;
  line-height: 50px;
  div {
    width: 50%;
    text-align: center;
    font-size: 14px;
  }
  .actvie {
    color: #588bf7;
  }
}
.makeList {
  background: #f8f8f8;
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
    font-size: 12px;
    color: #999;
  }
  .list {
    background: #fff;
    display: flex;
    align-items: center;
    margin: 0 10px 10px 10px;
    padding: 15px;
    font-size: 14px;
    border-radius: 5px;
    > div {
      display: flex;
      align-items: center;
      div:nth-child(1) {
        width: 136px;
        display: flex;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
          margin-right: 5px;
        }
        span {
          font-size: 11px;
          color: #999;
        }
        p {
          margin: 0;
          font-size: 10px;
          color: #777;
        }
      }
      div:nth-child(2) {
        width: 79px;
      }
      div:nth-child(3) {
        width: 90px;
        padding: 8px 10px;
        color: #fff;
        background: #cd4e65;
        border-radius: 5px;
        display: flex;
        justify-content: center;
      }
    }
  }
  .listBox{
    height: calc(100vh - 175px);
    overflow: scroll;
  }
  .noAmount {
    width: 137px !important;
    align-items: flex-end !important;
  }
  .bg-blue {
    background: #00abff !important;
  }
  .bg-green {
    background: #1cad90 !important;
  }
  .nowidth {
    width: 100% !important;
  }
}
</style>
